<template>
  <div>
    <el-dialog 
      title="新增用户" 
      v-model="visable" 
      width="50%"
     :close-on-click-modal="false" 
     draggable
     style="max-width: 530px;"
     >
      <div>
        <el-form
          ref="addRef"
          :model="dialogFormData"
          :rules="dialogFormRules"
          label-width="auto"
          size="small"
          style="width: 80%;margin: auto;"
        >
          <el-form-item label="用户名称:" prop="userName">
            <el-input v-model="dialogFormData.userName" placeholder="请输入用户名称" clearable />
          </el-form-item>
          <el-form-item label="账号:" prop="userAccount">
            <el-input v-model="dialogFormData.userAccount" placeholder="请输入账号" clearable />
          </el-form-item>
          <el-form-item label="密码:" prop="userPwd">
            <el-input v-model="dialogFormData.userPwd" type="password" placeholder="请输入密码" clearable />
          </el-form-item>
          <el-form-item label="角色:" prop="roleIds">
            <el-tree-select
              ref="roleTreeRef"
              v-model="dialogFormData.roleIds"
              :data="roleDataList"
              filterable
              value-key="roleId"
              node-key="roleId"
              :props="{ value: 'roleId', label: 'roleName'}"
              :check-strictly="true"
              clearable
              multiple
              show-checkbox
              check-on-click-node
            >
            </el-tree-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
          <div  class="dialog-footer">
            <el-button size="small" @click="visable = false"> 取消 </el-button>
            <el-button size="small" type="primary" @click="save"> 保存 </el-button>
          </div>
        </template>
    </el-dialog>
  </div>
</template>

<script>
import { addUser } from '@/api/system/user'
import { listAllRole } from '@/api/system/role'
export default {
  data() {
    return {
      visable: false,
      roleDataList: [],
      dialogFormData: {
        userName: '',
        userAccount: '',
        userPwd: '',
        roleIds: []
      },
      dialogFormRules: {
        userName: [
          { required: true, message: '请输入用户名称', trigger: ['blur', 'change'] },
          { min: 2, max: 20, message: '2~20字符以内', trigger: ['blur', 'change'] }
        ],
        userAccount: [
          { required: true, message: '请输入账号', trigger: ['blur', 'change'] },
          { min: 3, max: 20, message: '3~20字符以内', trigger: ['blur', 'change'] }
        ],
        userPwd: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { min: 6, max: 20, message: '6~20字符以内', trigger: ['blur', 'change'] }
        ]
      },
    }
  },
  methods: {
    openModal() {
      this.visable = true
      this.$nextTick(() => {
        this.$refs.addRef.resetFields()
      })
      // 获取所有角色
      listAllRole({}).then(res => {
        if (res.code === 1) {
          this.roleDataList = res.data
          this.roleDataList.unshift({'roleId':'0','parentRoleId':'0','roleName':'无','children':[]})
        }
      })
    },
    // 保存
    save() {
      this.$refs['addRef'].validate((valid) => {
        if (valid) {
          addUser(this.dialogFormData).then(res => {
            if (res.code == 1) {
              this.$message.success('操作成功')
              this.visable = false
              // 刷新父组件中的表格数据
              this.$emit('flushTable', {})
            } else {
              this.$message.error(res.msg)
            }
          }).catch((error) => {
          })
        }
      })
    },

  }
}
</script>
<style scoped>
:deep(.el-form-item__content) {
    display: inline-block;
    text-align: left;
    padding-right: 10%;
  }
  /deep/.el-drawer__title {
    text-align: left;
  }
  :deep(.el-input),
  :deep(.el-input-number--small) {
    width: 100%;
  }
</style>
